<LINK rel=stylesheet type=text/css href="pages/content/systemManager/userInfoManager/sysUserManage.css" />
<div id="userInfo">
  <yu-panel :title="$t('sysUserManager.yhgl')">
    <template slot="right">
      <yu-button-drop>
        <el-button @click="openCreateFn" v-if="addUserButton">{{ $t('sysUserManager.xz') }}</el-button>
        <el-button @click="openEditFn" v-if="editUserButton">{{ $t('sysUserManager.xg') }}</el-button>
        <el-button @click="deletestFn" v-if="deleteUserButton">{{ $t('sysUserManager.sc') }}</el-button>
        <el-button @click="useBatchFn" v-if="useUserButton">{{ $t('sysUserManager.qy') }}</el-button>
        <el-button @click="unUseBatchFn" v-if="unuseUserButton">{{ $t('sysUserManager.ty') }}</el-button>
        <el-button @click="openRelInfoFn" v-if="userRelButton">{{ $t('sysUserManager.yhglxx') }}</el-button>
        <el-button @click="resetPassword" v-if="resetPwsButton">{{ $t('sysUserManager.zzmm') }}</el-button>
      </yu-button-drop>
    </template>
    <el-row :gutter="24">
      <!--左侧机构树-->
      <el-col :span="5">
        <yufp-ext-tree ref="mytree" @node-click="nodeClickFn" :height="heightOrg" :data-url="treeUrlRel" data-id="orgId"
          data-label="orgName" data-pid="upOrgId" :data-root="dataRoot" :data-params="dataParams" lazy></yufp-ext-tree>
      </el-col>
      <!--用户信息列表部分-->
      <el-col :span="19">
        <yu-xform v-model="formdata" related-table-name="mytable" form-type="search">
          <yu-xform-group :column="4">
            <yu-xform-item :label="$t('sysUserManager.dldmxmygh')" colspan="8" label-width="180px" :placeholder="$t('sysUserManager.dldmxmygh')"
              ctype="input" name="userInfo"></yu-xform-item>
            <yu-xform-item :label="$t('sysUserManager.zt')" colspan="4" label-width="60px" :placeholder="$t('sysUserManager.zt')" ctype="select"
              name="userSts" data-code="DATA_STS"></yu-xform-item>
            <yu-xform-item :label="$t('sysUserManager.yxq')" :placeholder="$t('sysUserManager.yxq')" ctype="datepicker"
              name="deadline"></yu-xform-item>
          </yu-xform-group>
        </yu-xform>
        <!--用户列表-->
        <el-table-x ref="mytable" :checkbox="mainGrid.checkbox" :height="mainGrid.height" :data-url="mainGrid.dataUrl"
          :base-params="mainGrid.dataParams" :table-columns="mainGrid.tableColumns" @custom-detail-click="openDetailFn">
        </el-table-x>
      </el-col>
    </el-row>
  </yu-panel>
  <!--用户信息维护页面-->
  <el-dialog-x :center="true" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" height="360px"
    width="800px">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item :title="$t('sysUserManager.gjxx')" name="1">
        <el-form :model="userForm" :rules="rules" ref="userForm" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('sysUserManager.xm')" prop="userName">
                <el-input v-model="userForm.userName"></el-input>
              </el-form-item>
              <el-form-item :label="$t('sysUserManager.dldm')" prop="loginCode">
                <el-input type="text" v-model="userForm.loginCode" :readonly="readonly"></el-input>
              </el-form-item>
              <el-form-item :label="$t('sysUserManager.yxq')" prop="deadline">
                <el-date-picker type="date" v-model="userForm.deadline" :picker-options="datePick"></el-date-picker>
              </el-form-item>
              <el-form-item :label="$t('sysUserManager.zt')" prop="userSts">
                <el-select clearable v-model="userForm.userSts">
                  <el-option v-for="item in stsOptions" :key="item.key" :value="item.key" :label="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-upload class="avatar-uploader" :action="uploadAction" :show-file-list="false"
                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="userForm.userAvatar" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
          </el-row>
        </el-form>
        <el-form-x ref="userInfo" :group-fields="userFields" label-width="80px"></el-form-x>
      </el-collapse-item>
      <el-collapse-item :title="$t('sysUserManager.kzxx')" name="2">
        <el-form-x ref="userOtherInfo" :group-fields="userOtherFields" label-width="80px"></el-form-x>
      </el-collapse-item>
    </el-collapse>
    <div slot="footer" align="center">
      <el-button type="primary" v-if="dialogStatus=='create'" @click="saveCreateFn()">{{ $t('sysUserManager.bc') }}
      </el-button>
      <el-button type="primary" v-if="dialogStatus=='update'" @click="saveEditFn()">{{ $t('sysUserManager.bc') }}
      </el-button>
      <el-button @click="dialogFormVisible=false">{{ $t('sysUserManager.qx') }}</el-button>
    </div>
  </el-dialog-x>
  <!--用户信息详情页面-->
  <el-dialog-x :center="true" :title="textMap['detail']" :visible.sync="dialogDetailVisible" height="360px"
    width="800px">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item :title="$t('sysUserManager.gjxx')" name="1">
        <el-form :model="userForm" :rules="rules" ref="userForm" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('sysUserManager.xm')" prop="userName">
                <el-input v-model="userForm.userName" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item :label="$t('sysUserManager.dldm')" prop="loginCode">
                <el-input type="text" v-model="userForm.loginCode" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item :label="$t('sysUserManager.yxq')" prop="deadline">
                <el-input type="date" v-model="userForm.deadline" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item :label="$t('sysUserManager.zt')" prop="userSts">
                <el-select clearable v-model="userForm.userSts" :disabled="true">
                  <el-option v-for="item in stsOptions" :key="item.key" :value="item.key" :label="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-upload class="avatar-uploader" action="uploadAction" :show-file-list="false"
                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" disabled>
                <img v-if="userForm.userAvatar" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
          </el-row>
        </el-form>
        <el-form-x ref="userDetailInfo" :group-fields="userDetailFields" :disabled="true" label-width="80px">
        </el-form-x>
      </el-collapse-item>
      <el-collapse-item :title="$t('sysUserManager.kzxx')" name="2">
        <el-form-x ref="userDetailOtherInfo" :group-fields="userDetailOtherFields" :disabled="true" label-width="80px">
        </el-form-x>
      </el-collapse-item>
    </el-collapse>
  </el-dialog-x>
  <!--{{ $t('sysUserManager.yhglxx') }}-->
  <el-dialog-x :center="true" :title="textMap[dialogStatus]" :visible.sync="dialogVisibleRelInfo" height="420px"
    width="380px" @close="closeFn">
    <el-tabs v-model="activeFlag" @tab-click="handleClick">
      <el-tab-pane :label="$t('sysUserManager.yhjsxx')" name="first">
        <el-table-x ref="roleTable" :default-load="false" :pageable="false" :height="mainGridRole.height"
          :checkbox="mainGridRole.checkbox" :data-url="mainGridRole.dataUrl" :table-columns="mainGridRole.tableColumns">
        </el-table-x>
        <div align="center">
          <el-button type="primary" @click="saveEditFnRole">{{ $t('sysUserManager.bcjs') }}</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('sysUserManager.yhgwxx')" name="second">
        <el-table-x v-if="mainGridPost.ifDuty" ref="dutyTable" :height="mainGridPost.height" :default-load="false"
          :pageable="false" :checkbox="mainGridPost.checkbox" :data-url="mainGridPost.dataUrl"
          :table-columns="mainGridPost.tableColumns"></el-table-x>
        <div align="center">
          <el-button type="primary" @click="saveEditFnPost">{{ $t('sysUserManager.bcgw') }}</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('sysUserManager.sqjgxx')" name="third">
        <el-tree-x ref="orgUsertree" :show-checkbox="true" :height="mainGridPost.height" style="margin-top: 10px"
          :data-url="treeUrlRel" data-id="orgCode" data-label="orgName" data-pid="upOrgId" :data-root="orgRootId"
          :check-strictly="true"></el-tree-x>
        <div align="center">
          <el-button type="primary" @click="saveEditFnOrg">{{ $t('sysUserManager.bcjg') }}</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog-x>
  <el-dialog-x :center="true" :title="$t('sysUserManager.zzmm')" :visible.sync="pwdform.dialogVisible" height="200"
    width="400px">
    <el-form-x ref="pwdform" :group-fields="pwdform.pwdFields" label-width="100px"></el-form-x>
    <div slot="footer" class="dialog-footer" align="center">
      <el-button type="primary" @click="resetPwd">{{ $t('sysUserManager.qd') }}</el-button>
      <el-button @click="pwdform.dialogVisible = false">{{ $t('sysUserManager.qx') }}</el-button>
    </div>
  </el-dialog-x>
</div>